<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">{{ title }}</span>
              <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
            </div>
            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">数据监控</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao">
              <span class="text fw-b">政务办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao2">
              <span class="text fw-b">事项办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao3">
              <span class="text fw-b">诉求治理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao4">
              <span class="text fw-b">调节分析</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao5">
              <span class="text fw-b">新媒体监管</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao6">
              <span class="text fw-b">新媒体监管11</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao7">
              <span class="text fw-b">服务大厅</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao8">
              <span class="text fw-b">服务办件</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao9">
              <span class="text fw-b">交易政务</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao10">
              <span class="text fw-b">服务办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao11">
              <span class="text fw-b">督查考核</span>
            </div>
          </div>
        </div>

        <div class="body-box">

          <!-- <router-view></router-view> -->
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-12>
                <center-left1 />
              </dv-border-box-12>
            </div>
            <div>
              <dv-border-box-12>
                <center-left2 />
              </dv-border-box-12>
            </div>

            <!-- 中间 -->
            <div>
              <center />
            </div>
            <!-- 中间 -->

            <div>
              <center-right1 />
            </div>
            <div>
              <dv-border-box-13>
                <center-right2 />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <!-- <div class="bototm-box">
            <dv-border-box-13>
              <bottom-left />
            </dv-border-box-13>
            <dv-border-box-12>
              <bottom-right />
            </dv-border-box-12>
          </div> -->

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import CenterLeft2 from '../centerLeft2/index.vue'
import Center from '../center/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    CenterLeft1,
    CenterLeft2,
    Center,
    CenterRight1,
    CenterRight2,
    BottomLeft,
    BottomRight,
  },
  setup() {
    // * tab切换 颜色背景改变
    const lastChar = location.href.substr(location.href.length - 1)
    const tabColor = ref(lastChar)
    // * 颜色
    const decorationColors = ['#568aea', '#000000']
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })

    const router = useRouter()
    //路由跳转
    const tiao = () => {
      router.push("/wzh2")
    }

    const tiao2 = () => {
      router.push("/wzh3")
    }

    const tiao3 = () => {
      router.push("/sjk")
    }
    const tiao4 = () => {
      router.push("/sjk1")
    }
    const tiao5 = () => {
      router.push("/sjk2")
    }

    const tiao6 = () => {
      router.push("/mhr1")
    }
    const tiao7 = () => {
      router.push("/mhr2")
    }
    const tiao8 = () => {
      router.push("/mhr3")
    }
    const tiao9 = () => {
      router.push("/st1")
    }
    const tiao10 = () => {
      router.push("/st2")
    }

    const tiao11 = () => {
      router.push("/st3")
    }
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    // 生命周期
    onMounted(() => {
      cancelLoading()
      handleTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()
    })

    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)
    })

    //点击颜色切换  路由跳转
    const tab = (index) => {
      // console.log(index)
      tabColor.value = index
      router.push(`/tab${index}`)
    }

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    // return
    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      tabColor,
      tab,
      tiao,
      tiao2,
      tiao3,
      tiao4,
      tiao5,
      tiao6,
      tiao7,
      tiao8,
      tiao9,
      tiao10,
      tiao11
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
</style>
